<template>
  <div id="temp">
    <div class="PMessheader"></div>
    <div class="PMessMain" v-for="(item,index) in PhoneMessageList" :key="index">
      <!--  手机标题-->
      <div class="PMessMainTitle">
        <h1>{{item.type}}</h1>
      </div>
      <!-- 左侧图片-->
      <div class="PMessMainLeft">
        <div>
          <img :src="MainImage" alt="">
        </div>
        <div>
          <ul>
            <li class="PMessMainImgList" @mouseover="MainImage = item.imgsrc1">
              <img :src="item.imgsrc1" alt="">
            </li>
            <li class="PMessMainImgList">
              <img :src="item.imgsrc2" alt="" @mouseover="MainImage = item.imgsrc2">
            </li>
            <li class="PMessMainImgList">
              <img :src="item.imgsrc3" alt="" @mouseover="MainImage = item.imgsrc3">
            </li>
          </ul>
        </div>
      </div>
      <!-- 中部信息-->
      <div class="PMessMainMiddle">
        <ul>
          <li>
            <div class="PMainMiddle_left">
              <!--              <label class="">CPU：</label>-->
              <span>CPU：{{item.Cpu}}</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage1}"></i>
                游戏运行完美
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" :style="'width:'+item.precent"></span>
                <i>击败{{item.precent}}手机性能</i>
              </div>
              <span class="phoneBar_last">
                行业最高：高通蛟龙855+
              </span>
            </div>
          </li>
          <li>
            <div class="PMainMiddle_left">
              <span>后置：1600万像素+800万广角+200...</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage2}"></i>
                高清级像素
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" style="width: 64.14%;"></span>
                <i>高于64.14%手机像素</i>
              </div>
              <span class="phoneBar_last">
                行业最高：12000万
              </span>
            </div>
          </li>
          <li>
            <div class="PMainMiddle_left">
              <span>前置：1600万像素</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage2}"></i>
                高清级像素
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" style="width: 64.14%;"></span>
                <i>高于75.09%手机像素</i>
              </div>
              <span class="phoneBar_last">
                行业最高：4000万
              </span>
            </div>
          </li>
          <li>
            <div class="PMainMiddle_left">
              <span>内存：4GB</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage3}"></i>
                游戏运行良好
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" style="width: 64.14%;"></span>
                <i>大于51.25%手机内存</i>
              </div>
              <span class="phoneBar_last">
                行业最高：12G
              </span>
            </div>
          </li>
          <li>
            <div class="PMainMiddle_left">
              <span>电池：5000mAh</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage4}"></i>
                大电池
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" style="width: 64.14%;"></span>
                <i>大于96.3%手机续航</i>
              </div>
              <span class="phoneBar_last">
                行业最高：10300mAh
              </span>
            </div>
          </li>
          <li>
            <div class="PMainMiddle_left">
              <span>屏幕：6.53英寸</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage5}"></i>
                需双手打字
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" style="width: 64.14%;"></span>
                <i>高于64.14%手机像素</i>
              </div>
              <span class="phoneBar_last">
                行业最高：8英寸
              </span>
            </div>
          </li>
          <li>
            <div class="PMainMiddle_left">
              <span>分辨率：2340x1080像素</span>
              <span class="line">
                <i class="Icons" :style="{backgroundImage: bgImage6}"></i>
                1080P高清
              </span>
            </div>
            <div class="PMainMiddle_right">
              <div class="phoneBar">
                <span class="phoneProgress_Bar" style="width: 64.14%;"></span>
                <i>大于84.84%手机分辨率</i>
              </div>
              <span class="phoneBar_last">
                行业最高：3840*2160
              </span>
            </div>
          </li>
        </ul>
        <div>
          <span class="addBtn">加入对比</span>
        </div>
      </div>
      <!-- 右侧性能-->
      <div class="PMessMainRight"></div>
    </div>
    <div class="PMessbottom">
      <div class="PMessbottom_top">
        <h1>详细参数</h1>
      </div>
      <div class="PMessbottom_left">
        <div class="PMessbottom_leftMain">
          <ul>
            <li>
              <span>
                <a href="javascript:void(0);" @click="goAnchor('#base1')">基本参数</a>
              </span>
            </li>
            <li>
              <span>
                <a href="javascript:void(0);" @click="goAnchor('#base2')">屏幕</a>
              </span>
            </li>
            <li>
              <span>
                <a href="javascript:void(0);" @click="goAnchor('#base3')">硬件</a>
              </span>
            </li>
            <li>
              <span>
                <a href="javascript:void(0);" @click="goAnchor('#base4')">摄像头</a>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="PMessbottom_middle">
        <div class="PMessbottom_main" style="">
          <table>
            <tbody>
            <tr>
              <th class="PMessbottom_title1" id="base1">基本参数</th>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <th class="PMessbottom_title2" name="base2">屏幕</th>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <th class="PMessbottom_title2" id="base3">硬件</th>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <th class="PMessbottom_title2" id="base4">摄像头</th>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>发布会时间</td>
              <td>2019.05.24</td>
            </tr>
            <tr>
              <td>上市事件</td>
              <td>2019.05.24</td>
            </tr>

            </tbody>
          </table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PhoneMessage",
    data() {
      return {
        Message: 'abc',
        bgImage1: "url(" + require('../assets/icons/gameIcon.png') + ")",  //背景图
        bgImage2: "url(" + require('../assets/icons/HD.png') + ")",
        bgImage3: "url(" + require('../assets/icons/game.png') + ")",
        bgImage4: "url(" + require('../assets/icons/bettery.png') + ")",
        bgImage5: "url(" + require('../assets/icons/handtouch.png') + ")",
        bgImage6: "url(" + require('../assets/icons/phHD.png') + ")",
        PhoneMessageList: [{  //单个手机信息数组
          'price': '4500$',
          'date': '2020年2月01日',
          'type': '华为',
          'Cpu': '三星 Exynos 980',
          'swift': '支持',
          'precent': '90%',
          'imgsrc1': require('../assets/xiaomi10.jpg'),
          'imgsrc2': require('../assets/vivo.jpg'),
          'imgsrc3': require('../assets/rongyaov30.jpg'),
        }],
        ImageList: [], //图片存储
        MainImage: '',
      }
    },
    created() {
    },
    mounted() {
      this.MainImage = this.PhoneMessageList[0].imgsrc1;
    },
    methods: {
      goAnchor(selector){
        console.log(selector)
        var anchor = this.$el.querySelector(selector)
        document.documentElement.scrollTop = anchor.offsetTop;
      }
    },
  }
</script>

<style scoped>
  #temp {
    text-align: left;
    width: 85%;
    display: block;
    margin: auto;
  }

  .PMessMain {
    text-align: left;
    width: 100%;
    /*height: auto;*/
    height: 400px;
    display: block;
    margin: auto;
  }

  .PMessMain .PMessMainTitle h1 {
    height: 50px;
    font-size: 20px;
    color: #e8e2e2;
    text-align: left;
    padding-left: 10px;
    line-height: 50px;
    background-image: linear-gradient(to right, #9b7894, #b8b8b8, #6467b6);
    border-radius: 25px;
  }

  .PMessMain .PMessMainLeft {
    width: 30%;
    float: left;
    text-align: center;
    margin-top: 10px;
  }

  .PMessMain .PMessMainLeft img {
    width: 80%;
    height: auto;
    display: block;
    margin: auto;
    border: 1px solid #efefef;
  }

  .PMessMain .PMessMainLeft ul {
    width: 100%;
  }

  .PMessMain .PMessMainLeft .PMessMainImgList {
    width: 33%;
    float: left;
    margin-top: 5px;
  }

  .PMessMain .PMessMainLeft .PMessMainImgList img:hover {
    border: 1px solid #2fbaf8;
    cursor: pointer;
  }

  .PMessMain .PMessMainMiddle {
    display: inline-block;
    width: 70%;
    float: left;
  }

  .PMessMain .PMessMainMiddle li {
    margin-top: 10px;
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
  }


  .PMessMain .PMessMainMiddle .PMainMiddle_left {
    /*width: 100%;*/
    width: 40%;
    min-width: 240px;
    float: left;
    height: 100%;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_left span:nth-child(1) {
    background-color: white;
    float: left;
    margin: 0 0 0 15px;
    height: 100%;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_left .line {
    display: inline-block;
    border-left: 1px solid #d9c7c7;
    margin-left: 5px;
    padding-left: 5px;
    height: 100%;
    color: grey;
  }


  .PMessMain .PMessMainMiddle .PMainMiddle_left .Icons {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin: 0px 5px;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_right {
    float: left;
    width: 60%;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_right .phoneBar {
    float: left;
    height: 24px;
    line-height: 24px;
    width: 55%;
    background-color: #dae7f2;
    border-radius: 25px;
    position: relative;
    margin: 3px 20px 0 3px;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_right .phoneBar i {
    display: block;
    color: white;
    font-size: 12px;
    font-style: normal;
    margin-left: 10px;
    position: absolute;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_right .phoneBar .phoneProgress_Bar {
    background-color: #2fbaf8;
    display: block;
    height: 24px;
    border-radius: 24px;
    position: absolute;
  }

  .PMessMain .PMessMainMiddle .PMainMiddle_right .phoneBar_last {
    width: 45%;
    color: #6467b6;
  }

  .PMessMain .PMessMainMiddle .addBtn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    border-radius: 3px;
    border: none;
    display: block;
    margin: 10px 0px 0px 200px;
    background-color: #768eb6;
  }

  .PMessbottom {
    width: 100%;
    height: 500px;
    margin: 10px auto;
    display: block;
  }

  .PMessbottom .PMessbottom_top h1 {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding-left: 10px;
  }

  .PMessbottom .PMessbottom_left .PMessbottom_leftMain {
    background-color: yellow;
    /*height: 60px;*/
    position: fixed;
    margin-left: 25px;
    margin-top: 10px;
    padding: 5px 25px;
    text-align: center;
  }

  .PMessbottom .PMessbottom_middle {
    /*background-color: yellowgreen;*/
    /*position: relative;*/
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main {
    /*height: 400px;*/
    margin: auto;
    width: 75%;
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main tbody, table {
    width: 100%;
    display: block;
    margin: auto
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main tbody tr {
    /*height: 50px;*/
    /*line-height: 50px;*/
    margin: auto;
    display: block;
    border-top: 1px solid bisque;
    border-left: 1px solid bisque;
    border-right: 1px solid bisque;
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main tbody tr th {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background-color: #fafafa;
    display: block;
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main tbody tr td:nth-child(1) {
    height: 20px;
    line-height: 20px;
    width: 200px;
    padding-left: 20px;
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main tbody tr td:nth-child(2) {
    height: 30px;
    line-height: 30px;
    border-left: 1px solid bisque;
    padding-left: 20px;
  }


  .PMessbottom .PMessbottom_middle .PMessbottom_main .PMessbottom_title {
    width: 30%;
    text-align: center;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    border-right: 1px solid yellowgreen;
  }

  .PMessbottom .PMessbottom_middle .PMessbottom_main .PMessbottom_mess {
    width: 70%;
    background-color: bisque;
  }


</style>
